<template>
	<div class="system-dic-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-row :gutter="20">
				<el-col :span="14">
					<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" :size="formSize" status-icon>
						<el-form-item label="选择方式：" >
							<el-radio-group v-model="ruleForm.autoplay">
								<el-radio label="true">自定义会员</el-radio>
								<el-radio label="false">指定会员</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="选择会员：" >
							<el-input v-model="textarea2"
								:autosize="{ minRows: 3, maxRows: 6 }"
								type="textarea" placeholder="Please input" />
						</el-form-item>
						<el-form-item label="短信签名：" >
							<el-radio-group v-model="ruleForm.autoplay">
								<el-radio label="true">自定义会员</el-radio>
								<el-radio label="false">指定会员</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-divider border-style="dashed" />
						<el-form-item label="短信内容：" >
							<el-input v-model="textarea2"
								:autosize="{ minRows: 3, maxRows: 6 }"
								type="textarea" placeholder="Please input" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary">
								确认发送
							</el-button>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="10">
					<el-card>
						<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" status-icon>
							<el-form-item label="可用变量：" >
								<el-row>
									<el-col :span="8" v-for="i in 8">
										<span>会员姓名 / ${Name}</span>
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item label="注意事项：" >
								<el-row>
									<div>
										<p>内容规范</p>
										<p>发送目标为自定义号码时,请勿使用变量。</p>
										<p>内容合法，不能发送房产、发票、移民等国家法律法规严格禁止的内容。</p>
										<p>变量命名风格为${XXX},视情况从上述表格中选择合适的变量代替相关内容。例，尊敬的xx先生,在模板中应编辑为尊敬的${NameZc}。</p>
										<p>计费规则</p>
										<p>短信字数小于等于70个字，按照70个字（包含中英文字符）一条短信计算。中文英文符号统一计算为一个字符。</p>
										<p>短信字数大于70个字，占用3个字符作为分条字符，按照67个字记为一条短信计算，多条短信可能在部分手机系统上呈现为一条短信的形态，请注意。</p>
									</div>
								</el-row>
							</el-form-item>
						</el-form>
					</el-card>
				</el-col>
			</el-row>
		</el-card>
		<DicDialog ref="dicDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemDic">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage, FormRules } from 'element-plus';
// 引入组件
const DicDialog = defineAsyncComponent(() => import('/@/views/system/dic/dialog.vue'));

// 定义变量内容
const dicDialogRef = ref();
const state = reactive<SysDicState>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});

const ruleForm = reactive({
	publish: 2, // 发布，快速发布1 标准发布2
	status: '',
	source: 2, // 来源，供应链1 自主发布2
	type: 1, // 商品类型，商品1 卡项2  视频3
	channel: [], // 销售渠道 1门店2线上
	brand: '', // 商品品牌
	name: '', // 商品名称
	image: '', // 商品主图
	image2: '', // 商品主图
	proportion: '1:1', // 图片视频比例
	sliderImage: [], // 商品轮播图
	isVideo: true, // 是否添加视频
	videoType: 1, // 1本地视频，2视频链接
	videoLink: '', // 视频链接
	autoplay: true, // 自动播放true,
	muteplay: true, // 静音播放true,
	storeCategory: 1, //门店商品分类
	shopCategory: 3, //商城商品分类
	
})

const rules = reactive<FormRules<any>>({
	name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
	property: [ {required: true, message: '请选择商品属性', trigger: 'change', }],
	status: [ {required: true, message: '请选择销售状态', trigger: 'change', }],
	system: [ {required: true, message: '请选择系统分类', trigger: 'change', }],
	brand: [ {required: true, message: '请选择商品品牌', trigger: 'change', }],
	category: [ {required: true, message: '请选择门店商品分类', trigger: 'change', }],
	cellStore: [ {required: true, message: '请选择门店商品分类', trigger: 'blur', }],
	specsId: [ {required: true, message: '请选择商品规格', trigger: 'change', }],
})


// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	const data = [];
	for (let i = 0; i < 2; i++) {
		data.push({
			dicName: i === 0 ? '角色标识' : '用户性别',
			fieldName: i === 0 ? 'SYS_ROLE' : 'SYS_UERINFO',
			describe: i === 0 ? '这是角色字典' : '这是用户性别字典',
			status: true,
			createTime: new Date().toLocaleString(),
			list: [],
		});
	}
	state.tableData.data = data;
	state.tableData.total = state.tableData.data.length;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};
// 打开新增字典弹窗
const onOpenAddDic = (type: string) => {
	dicDialogRef.value.openDialog(type);
};
// 打开修改字典弹窗
const onOpenEditDic = (type: string, row: RowDicType) => {
	dicDialogRef.value.openDialog(type, row);
};
// 删除字典
const onRowDel = (row: RowDicType) => {
	ElMessageBox.confirm(`此操作将永久删除字典名称：“${row.dicName}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			getTableData();
			ElMessage.success('删除成功');
		})
		.catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>
